﻿@model Leads360Express.Repository.Pages.CompanySettings.CompanySettingsModel
@{
    ViewBag.Title = "Company Settings";
    Layout = "~/Views/Shared/_Layout..cshtml";
}

<form method="post" class="form" >
    <fieldset id="CompanySettingsForm">
						
		<div class="content">
			<h2 class="app">
				<strong>Company Settings</strong>
				@Html.Partial("_PatialLeads_Calls", @Model.LeadCall )
			</h2>
								
            @*<div class="error-msg hidden" data-bind="style: { display: ShowUpdateComplete() == true ? 'block' : 'none' }" >
				<span class="error">Thank you for your payment!</span>
			</div>*@
            
            <div>

                <div class="title nomargin">
					    <h3>General Settings</h3>
                </div>
								
                <div class="panel grouped-form rounded">
                
                    <ul class="accordeon-tabs accordeon-2">
                    <li class="open">
                        <span class="panel">
                        <div class="row">
                            <label for="text1">Company Name:</label>
                            <input class="text" type="text" id="CompanyName" data-bind="value: CompanyName" />
                        </div>
                        <div class="row">
                            <label for="text1">Phone Number:</label>
                            <span class="phone_fields_wrapper groupinput" style="height: auto">
                                <input type="hidden" class="hidden" id="WorkPhone" name="WorkPhone" data-bind="value: WorkPhone" />
                                <div class="input-holder-setup" style="width: 210px">
                                    <input id="cell1" class="text phone-field phone-area" type="text" data-bind="value: CellPhone1, attr:{maxlength:3}" onkeypress="return isNumberKey(event)" style="width: 10%" />
                                    <span class="phone-sep">–</span>
                                    <input id="cell2" class="text phone-1" type="text" data-bind="value: CellPhone2, attr:{maxlength:3}" onkeypress="return isNumberKey(event)" style="width: 10%"  />
                                    <span class="phone-sep">–</span>
                                    <input id="cell3" class="text phone-2" type="text" data-bind="value: CellPhone3, attr:{maxlength:4}" onkeypress="return isNumberKey(event)" style="width: 10%"  />

                                    <input id="WorkPhoneExt" name="WorkPhoneExt" class="text phone-ext" type="text" onkeypress="return isNumberKey(event)" data-bind="value: WorkPhoneExt, attr:{maxlength:8}"  style="width: 10%" />
                                </div>
                            </span>
                        </div>      
                        <div class="row">
                            <label for="text1">Time Zone:</label>
                            <div class="select-holder" style="width: 210px">
                            <select id="TimeZone" class="select" data-bind="foreach: TimeZoneOptions, value: TimeZone, optionsCaption: 'Select Time Zone'">
                                <option data-bind="value: Id, text: Title"></option>
                            </select>
                            </div>
                        </div> 
                        <div class="row check-block">
                            <label for="text1">Users Receive New Lead Notifications:</label>
                            <input class="checkbox" type="checkbox" id="NewLeadNotification" data-bind="checked: HasNewLeadNotification" />                        
                        </div>    
                        </span>
                    </li>
                    </ul>                  
                </div>
                
                <div class="title nomargin">
					                <h3>Summary of Current Services</h3>
                </div>
								
                <div class="panel grouped-form rounded">
                
                    <ul class="accordeon-tabs accordeon-2">
                    <li class="open">
                        <span class="panel">
                        <div class="row">
                            <label for="text1">Number of Licenses:</label>
                            <span data-bind="text: NumberOfLicenses"></span>
                        </div>
                        <div class="row">
                            <label for="text1">Dial-IQ:</label>
                            <span data-bind="text: DialIq"></span>
                        </div>      
                        <div class="row">
                            To change your plan please call Leads360 at 310-756-7552                        </div>    
                        </span>
                    </li>
                    </ul>                  
                </div>
                
                <div class="title nomargin">
					                <h3>Account Payment</h3>
                </div>
								
                <div class="panel grouped-form rounded">
                
                    <ul class="accordeon-tabs accordeon-2">
                    <li class="open">
                        <div class="error-msg" data-bind="visible: HasCreditDeclinde">
						    <span class="error">Your credit card was declined. Please update your payment information. Your card will be charged $<span data-bind="text: TotalPriceProduct"></span>.</span>
					    </div>
                        <span class="panel">
                        <div class="row">
                            <label for="text1">Card Number:</label>
                            <input class="text phoneext" type="text" id="CardNumber" value="@Model.PaymentInfo.CreditModel.CardNumberMask" data-bind="value: CardNumber" onkeypress="return isNumberKey(event)" />
                        </div>
                        <div class="row">
                            <label for="text1">Security:</label>
                            <input class="text" type="text" id="SecurityCode" data-bind="value: SecurityCode" onkeypress="return isNumberKey(event)" maxlength="4" style="width:40px;margin-right:3px;" /><a href="##" class="info" title="The 3 digits on the back of your Visa or Mastercard, or the 4 digits on the front of your American Express."><em>info</em></a>
                        </div>      
                        <div class="row">
                            <label for="text1">Name on Card:</label>
                            <input class="text" type="text" id="NameCard" data-bind="value: NameCard" />
                        </div>
                        <div class="row">
                            <label for="text1">Expiration Date:</label>
                            <div class="select-holder month-s" style="width: 139px">
							        <select id="Month" class="month-s" data-bind="foreach: MonthOptions, value: Month, optionsCaption: 'Select Month'" style="width: 117px;">
								        <option data-bind="value: NumberMonth, text: TextMonth"></option>
							        </select>
                            </div>
                            <div class="select-holder year-s" style="width: 67px">
                                <select id="Year" class="year" data-bind="options: YearOptions, value: Year, optionsCaption: 'Year'" class="year" style="width: 45px;">
						        </select>   
					        </div>
                        </div>
                        <div class="row">
                            <label for="text1">Billing Address:</label>
                            <input class="text" type="text" id="BilingAddress1" data-bind="value: BilingAddress1" />
                        </div>
                        <div class="row">
                            <label for="text1">Billing Address 2:</label>
                            <input class="text" type="text" id="BilingAddress2" data-bind="value: BilingAddress2" />
                        </div>
                        <div class="row">
                            <label for="text1">City:</label>
                            <input class="text" type="text" id="City" data-bind="value: City" />
                            </div>
                        <div class="row">
                            <label for="text1">State:</label>
                            <div class="select-holder">
                                <select id="State" class="select1" data-bind="value: State, foreach: StateOptions, optionsCaption: 'Select State'" name="State">
                                    <option data-bind="value: (Name=='Select State' ? '' : Name), text: Name">Select State</option>
                                </select>
                            </div>
                        </div>
                        <div class="row">
                            <label for="text1">Zip Code:</label>
                            <input class="text" type="text" id="ZipCode" onkeypress="return isNumberKey(event)" data-bind="value: ZipCode" />
                        </div>
                        <div class="row">
                            <label for="text1">Country:</label>
                            <div class="select-holder">
                                <select id="Country" class="select1" data-bind="value: Country, foreach: CountryOptions, optionsCaption: 'Select Country'">
                                    <option data-bind="value: Id, text: Name"></option>
                                </select>
                            </div>
                        </div>
                        </span>
                    </li>
                    </ul>                  
                </div>
                
                <h3 class="centered-wbtn centered-wbtn-bottom save">
  				    <span>
  				        <a href="/Dashboard" data-bind="visible: ShowPrevious" class="btn btn-cancel-page">previous</a>
					        <a id="btnNext" href="javascript:void(1);" data-bind="click: UpdateCompanySettings" class="btn btn-submit-page">next</a>
                    </span>
                </h3>
            </div>
            <div class="clear"></div>
            @Html.Partial("_Footer.Copyright")  
		</div><!-- //.content -->
              
        <div class="popup-wrapper" id="popupError" style="display:none">
            <div class="popup-content">
                <h4 class="processing" data-bind="text: msgError"></h4>
                <p class="last">
                    <a href="javascript:closePopup();" class="btn btn-closeSignup center">Close</a>
                </p>
            </div>
        </div>

        <div class="popup-wrapper" id="popupCreditDeclined" style="display:none">
            <div class="popup-content">
                <h4>The reason you are seeing this page is that your credit card has been declined.</h4>
                <h4>Please update your payment information.</h4>
                <p class="last">
		            <a href="javascript:void(0);" onclick="hideProcess()" class="btn btn-continue-blue center">Continue</a>
                </p>
            </div>
        </div>
        <div class="popup-wrapper" id="popupComplete" style="display:none">
            <div class="popup-content">
                <h4>Update successful.</h4>
                <h4 data-bind="text: msgPaymentStatus"></h4>
                <p class="last">
		            <a href="javascript:void(0);" onclick="closePopupComplete()" class="btn btn-continue-blue center">Continue</a>
                </p>
            </div>
        </div>
	</fieldset>
</form>

<script type="text/javascript">
    var data = @(Html.Raw(Json.Encode(Model)));
    
    function closemsgError() {
        $("#popupError").hide();
        $("#fancybox-overlay").hide();
        $(".fancybox-skin").hide();
    }
</script>
<script src="/Scripts/tooltip.js" type="text/javascript"></script>
<script src="/Scripts/fancybox.js" type="text/javascript"></script>
<script src="/Scripts/viewModel/CompanySettingsViewModel.js" type="text/javascript"></script>